<template>
	<div id="home">
		<nav>
			<header class="title">
				<span class="text">欢迎使用资产管理系统，数据无价，谨慎操作！</span>
			</header>
		</nav>
		<main>
			<el-row class="row">
				<el-col :span="4" class="asi">
					<ul>
						<li
							@click="clickOrder(index)"
							v-for="(item, index) in orderText"
							:class="{ active: selectedItem === index }">
							<component :is="item.icon" />
							<span>
								{{ item.text }}
							</span>
						</li>
					</ul>
				</el-col>
				<el-col :span="20" class="art">
					<router-view />
				</el-col>
			</el-row>
		</main>
		<footer class="footer">
			<span>Copyright © 2025 版权所有</span>
		</footer>
	</div>
</template>

<script setup>
	import { ref } from "vue";
	import { useRouter } from "vue-router";
	const router = new useRouter();

	const selectedItem = ref(1);
	const orderText = [
		{ icon: "Setting", text: "系统参数" },
		{ icon: "EditPen", text: "录入数据" },
		{ icon: "Search", text: "查询资产" },
		{ icon: "User", text: "变更资产" },
		{ icon: "Delete", text: "回收数据" },
		{ icon: "ChatDotRound", text: "盘点总结" },
	];
	const clickOrder = (index) => {
		selectedItem.value = index;
		switch (index) {
			case 0:
				router.push("/home/system");
				break;
			case 1:
				router.push("/home/typein");
				break;
			case 2:
				router.push("/home/search");
				break;
			case 3:
				router.push("/home/change");
				break;
			case 4:
				router.push("/home/recycle");
				break;
			case 5:
				router.push("/home/sumup");
				break;
			default:
				router.push("/home/typein");
		}
	};
</script>

<style>
	#home {
		height: 100%;
		padding: 1.1rem;
		background-color: #000;
		color: #ddd;
		position: relative;
		.title {
			padding-bottom: 1.1rem;
			padding-left: 10.3rem;
			text-align: right;
			color: #50fae3;
			overflow: hidden;
			white-space: nowrap;
			.text {
				display: inline-block;
				position: relative;
				color: aqua;
				right: -355px;
				-webkit-animation: marq 30s linear infinite 2s;
			}
		}
		.row {
			height: 87vh;
			.asi {
				.active {
					color: #ea5c00;
				}
				li {
					padding-bottom: 2rem;
					list-style: none;
					cursor: pointer;
					svg {
						width: 1rem;
						vertical-align: middle;
					}
					span {
						margin-left: 0.5rem;
						vertical-align: middle;
					}
					span:hover {
						color: #ea5c00;
					}
				}
			}
			.art {
				padding: 4rem 8rem 6.5rem 8rem;
				background: linear-gradient(to top left, #552b68, #26756f, #f8d03f);
			}
		}
		.footer {
			padding-top: 0.4rem;
			text-align: center;
			font-size: 0.7rem;
		}
	}
	@-webkit-keyframes marq {
		0% {
			right: -355px;
		}
		100% {
			right: 1010px;
		}
	}
</style>
